<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>hello-vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <div id="app-1">
        <!-- v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。 -->
        <p>{{ message }}</p>
        <input v-model="message">
    </div>
    <div id="app-2">
        <p></p>
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>
    <div id="app-3">
        <p v-if="seen">现在你看到我了</p>
    </div>
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>
    <div id="app-5">
        <p>{{ message }}</p>
        <!-- v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法 -->
        <button v-on:click="reverseMessage">翻转字符串</button>
    </div>
    <div id="app-7">
        <ol>
            <!-- 创建一个 todo-item 组件的实例 -->
            <!-- 现在为每个 todo-item 提供 todo 对象, todo 对象是变量，即其内容可以是动态的。也需要为每个组件提供一个“key”，稍后再作详细解释。-->
            <todo-item v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id">
            </todo-item>
        </ol>
    </div>
    
    
    <script>
    new Vue({
        el:'#app',
        data: {
            message:"Hello Vue!"
        }
    })
    new Vue({
        el:'#app-1',
        data: {
            message:"Hello Vue!"
        }
    })
    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于' + new Date().toLocaleString()
        }
    })
    var app3 = new Vue({
        el: "#app-3",
        data: {
            seen: true
        }
    })
    var app4 = new Vue({
        el: "#app-4",
        data: {
            todos: [
                {text: "学习javascript"},
                {text: "学习vue"},
                {text: "学习go"}
            ]
        }
    })
    var app5 = new Vue({
        el: "#app-5",
        data: {
            message: "Hello vue.js!"
        }, 
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })

    // 定义名为 todo-item 的新组件
    Vue.component('todo-item', {
        // todo-item 组件现在接受一个"prop"，类似于一个自定义特性。这个 prop 名为 todo。
        props: ["todo"],
        template : '<li>{{ todo.text }}</li>'
    })
    var app7 = new Vue({
        el: "#app-7",
        data: {
            groceryList: [
                {id:0, text: '蔬菜'},
                {id:1, text: '奶酪'},
                {id:2, text: '水果'}
            ]
        }
    })

    </script>
</body>
</html>